
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d")!;

const width = window.innerWidth * devicePixelRatio,
    height = window.innerHeight * devicePixelRatio;
canvas.width = width;
canvas.height = height;
const fontsize = 16 * devicePixelRatio;
const columnWidth = fontsize;
const columnNum = width / fontsize;

console.log(columnNum)

const nextChars = new Array(columnNum).fill(1);

export function draw(){
    ctx.fillStyle ='rgba(0,0,0,0.1)'
    ctx.fillRect(0, 0, width, height);
    
    for(let i = 0; i < columnNum; i++){
        const x = i * columnWidth;
        const y = nextChars[i] * fontsize
        ctx.fillStyle = getRandomColor();
        ctx.font = `${fontsize}px consolas`;
        ctx.fillText(getRandomChar(), x, y);
        ctx.fill();
        if (y > height && Math.random() > 0.99){
            nextChars[i] = 1;
        }else{
            nextChars[i]++;
        }
    }
    
    requestAnimationFrame(draw);
}

//  获取随机的颜色
function getRandomColor() {
    return '#' + Math.random().toString(16).slice(2, 8);
}

// 获取随机的字符
function getRandomChar() {
    const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    return chars[Math.floor(Math.random() * chars.length)];
}